<template>
    <div class="blog" @scroll="handleScroll">
        <div class="main-tap">
            <span
                :class="{
                    'top-chick': contentPageRO.orders.length === 0
                }"
                @click="chickNowOrder(false)"
                >推荐</span
            >
            <span
                :class="{
                    'top-chick': contentPageRO.orders.length > 0
                }"
                @click="chickNowOrder(true)"
                >最新</span
            >
        </div>
        <div>
            <div
                v-for="(content, i) in contentShows"
                :key="content.id"
                class="blog-item"
                @click="toShowContent(content.id)"
            >
                <div class="content">
                    <div class="top">{{ content.title }}</div>
                    <div class="middle">{{ content.summary }}</div>
                    <div class="end">
                        <span class="author"> {{ content.createName }} </span>
                        <span v-show="contentPageRO.orders.length != 0" class="time">
                            {{ formatTime(content.createTime) }}
                        </span>
                        <div class="praise">
                            <el-icon style="margin-right: 2px">
                                <View />
                            </el-icon>
                            <span>{{ content.readNum }}</span>
                        </div>
                        <div class="praise" @click.stop="chickSupport(content)">
                            <svg
                                v-if="content.support"
                                class="chickSuccess"
                                width="13"
                                height="13"
                                viewBox="0 0 48 48"
                                fill="none"
                                style="margin-right: 2px"
                            >
                                <path
                                    d="M36.222 40.303l5.949-18.697A2 2 0 0040.265 19l-13.133.075L28.5 15.5c.964-2.52 3.172-5.9 1-7.5l-1.711-1.419a1 1 0 00-1.386.196L17 19h-3v22h21.269a1 1 0 00.953-.697z"
                                    fill="currentColor"
                                />
                                <path
                                    d="M7 17v26m35.17-21.394l-5.948 18.697a1 1 0 01-.953.697H14V19h3l9.403-12.223a1 1 0 011.386-.196L29.5 8c2.172 1.6-.036 4.98-1 7.5l-1.368 3.575L40.265 19a2 2 0 011.906 2.606z"
                                    stroke="#1e80ff"
                                    stroke-width="4"
                                    fill="currentColor"
                                />
                            </svg>
                            <svg
                                v-else
                                width="13"
                                height="13"
                                viewBox="0 0 48 48"
                                fill="none"
                                style="margin-right: 2px"
                            >
                                <path
                                    d="M7 17v26m35.17-21.394l-5.948 18.697a1 1 0 01-.953.697H14V19h3l9.403-12.223a1 1 0 011.386-.196l2.535 1.87a6 6 0 012.044 6.974L31 19h9.265a2 2 0 011.906 2.606z"
                                    stroke="#4E5969"
                                    stroke-width="2"
                                />
                            </svg>
                            <span v-if="content.supportNum == 0">点赞</span>
                            <span v-else>{{ content.supportNum }}</span>
                        </div>
                        <div class="praise" @click.stop="chickFavorite(content)">
                            <el-icon v-if="content.favorite" style="margin-right: 2px" size="16">
                                <StarFilled class="chickSuccess" />
                            </el-icon>
                            <el-icon v-else style="margin-right: 2px">
                                <Star />
                            </el-icon>
                            <span v-if="content.favoriteNum == 0">收藏</span>
                            <span v-else>{{ content.favoriteNum }}</span>
                        </div>
                        <div class="praise">
                            <el-icon>
                                <ChatDotRound />
                            </el-icon>
                            <span> 评论 </span>
                        </div>
                        <div class="more-fill-praise">
                            <el-icon class="more-fill" @click.stop="index = i">
                                <MoreFilled />
                            </el-icon>
                            <div v-if="index == i" class="more-fill-end">
                                <div class="triangle"></div>
                                <div class="more-fill-item" @click.stop="edit(content.id)">
                                    <el-icon>
                                        <Edit />
                                    </el-icon>
                                    <span>编辑</span>
                                </div>
                                <div class="more-fill-item">
                                    <el-icon>
                                        <Upload />
                                    </el-icon>
                                    <span>置顶</span>
                                </div>
                                <div class="more-fill-item" @click.stop="deleteContent(content.id)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                    <span>删除</span>
                                </div>
                            </div>
                        </div>
                        <div class="tag">
                            <el-tag
                                v-for="(tag, index) in computedTags(content.label)"
                                :key="index"
                                class="mx-1"
                                type="info"
                                size="small"
                            >
                                {{ tag }}
                            </el-tag>
                        </div>
                    </div>
                </div>
                <el-image
                    style="width: 110px; height: 74px; margin-left: auto"
                    :src="content.cover"
                    fit=""
                />
            </div>
        </div>
        <LoadingComponent :show-loading="showLoading" />
        <PageEnd :show-ending="showEnding" />
        <el-backtop target=".blog" :right="100" :bottom="100" />
    </div>
</template>
<script lang="ts">
    import { defineComponent } from 'vue';
    import {
        Star,
        StarFilled,
        View,
        ChatDotRound,
        MoreFilled,
        Edit,
        Upload,
        Delete
    } from '@element-plus/icons-vue';

    export default defineComponent({
        name: 'UserWriting',
        components: { Star, StarFilled, View, ChatDotRound, MoreFilled, Edit, Upload, Delete }
    });
</script>

<script lang="ts" setup>
    import LoadingComponent from '@/components/LoadingComponent.vue';
    import { ContentPageRO, ContentShowVO } from '@/api/content/content/content';
    import { favorite, getContentShowPage, remove, support } from '@/api/content/content/api';
    import { onMounted, ref } from 'vue';
    import router from '@/router';
    import formatTime from '../../../../utils/formatTime';
    import { useUserStore } from '@/store/user';
    import { throttle } from '@/utils/util';
    import PageEnd from '@/components/PageEnd.vue';

    const userInfo = useUserStore();

    const contentPageRO = ref<ContentPageRO>({
        orders: []
    });
    const computedTags = (tags: string) => {
        return tags.split(',');
    };

    const contentShows = ref<ContentShowVO[]>([]);
    const showLoading = ref(true);
    const index = ref(-1);
    const showEnding = ref(false);
    let current = 1;
    let size = 10;
    let total = 0;

    onMounted(() => {
        //添加当前用户
        contentPageRO.value.userId = userInfo.id;
        loadContent(current, size);
    });

    function loadContent(current: number, size: number, isClear?: boolean) {
        getContentShowPage({
            current: current,
            size: size,
            ...contentPageRO.value
        }).then(({ data }) => {
            if (isClear) {
                if (data.data) contentShows.value = data.data;
            } else {
                if (data.data) data.data.forEach((content) => contentShows.value.push(content));
            }
            total = data.total;
            showLoading.value = false;
        });
    }

    function chickNowOrder(isNow?: boolean) {
        if (isNow) {
            if (contentPageRO.value.orders && contentPageRO.value.orders.length == 0) {
                contentPageRO.value.orders.push({ direction: 'DESC', field: 'create_time' });
            }
            loadContent(current, size, true);
            return;
        }
        if (contentPageRO.value.orders) contentPageRO.value.orders.pop();
        loadContent(current, size, true);
    }

    function toShowContent(id: string) {
        router.push({
            path: `/show/${id}`
        });
    }

    async function chickSupport(contentShowVO: ContentShowVO) {
        await support(contentShowVO.id, contentShowVO.support);
        if (contentShowVO.support) {
            contentShowVO.supportNum--;
        } else {
            contentShowVO.supportNum++;
        }
        contentShowVO.support = !contentShowVO.support;
    }

    async function chickFavorite(contentShowVO: ContentShowVO) {
        await favorite(contentShowVO.id, contentShowVO.favorite);
        if (contentShowVO.favorite) {
            contentShowVO.favoriteNum--;
        } else {
            contentShowVO.favoriteNum++;
        }
        contentShowVO.favorite = !contentShowVO.favorite;
    }

    function edit(id: string) {
        router.push({
            path: `/blog-edit/${id}`
        });
    }

    function resetPage() {
        current = 1;
        size = 10;
    }

    async function deleteContent(id: string) {
        await remove(id);
        resetPage();
        loadContent(current, size, true);
    }

    // 滚动条处理
    const handleScroll = throttle((event: Event) => {
        const { target } = event;
        const scrollTop = target.scrollTop;
        const scrollHeight = target.scrollHeight;
        const clientHeight = target.clientHeight;

        // 计算距离底部还剩多少像素
        const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
        // 当距离底部小于或等于阈值时，加载数据
        if (distanceFromBottom <= 5) {
            if (contentShows.value.length != total) {
                current = current + 1;
                showLoading.value = true;
                loadContent(current, size, false);
            } else {
                showEnding.value = true;
            }
        }
    }, 500);
</script>

<style scoped lang="scss">
    .blog {
        width: 720px;
        height: calc(100vh - 80px);
        overflow: auto;
    }

    .blog {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .main-tap {
        padding: 5px;
        background-color: white;
    }

    .main-tap > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        margin: 0 10px;
        color: #606266;
        background-color: #e8e8e8;
        width: 50px;
        text-align: center;
        border-radius: 40px;
        font-size: 14px;
    }

    .main-tap > span:hover {
        color: #505154;
    }

    .top-chick {
        background-color: #c3e0ff !important;
        color: #005e93 !important;
    }

    .blog-item {
        height: 100px;
        padding: 10px 20px 0;
        display: flex;
        background-color: white;
    }

    .blog-item:hover {
        background-color: #e7e7e7;
        cursor: pointer;
    }

    .content {
        width: 546px;
        border-bottom: 1px #dedede solid;
    }

    .middle {
        margin: 10px 0;
        font-size: 12px;
        color: #8a919f;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .end {
        display: flex;
        height: 24px;
        align-items: center;
        justify-content: center;
    }

    .praise {
        font-size: 13px;
        color: #8a919f;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 15px;
    }

    .more-fill-praise {
        font-size: 13px;
        color: #424242;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 15px;
        position: relative;
    }

    .praise > span {
        padding-left: 2px;
    }

    .author {
        font-size: 13px;
        color: #8a919f;
        border-right: 1px #8a919f solid;
        padding-right: 10px;
        line-height: 12px;
    }

    .time {
        font-size: 13px;
        color: #8a919f;
        border-right: 1px #8a919f solid;
        padding: 0 10px;
        line-height: 12px;
    }

    .tag {
        margin-left: auto;
        padding-right: 5px;
    }

    .tag > .el-tag {
        margin: 0 2px;
    }

    .category {
        width: 180px;
        background-color: white;
        display: flex;
        padding: 8px 8px;
        flex-direction: column;
    }

    .category-item {
        display: flex;
        align-items: center;
        justify-items: center;
        height: 45px;
        padding: 5px 5px;
    }

    .icon {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }

    .category-item:hover {
        background-color: #e7e7e7;
        color: #1e80ff;
    }

    .chick {
        background-color: #eaf2ff;
        color: #1e80ff;
    }

    .triangle {
        width: 0;
        height: 0;
        border-bottom: 8px solid #fbfbfb;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        margin: 0 auto;
    }

    .more-fill-end {
        position: absolute;
        top: 15px;
        text-align: center;
        border-radius: 4px;
    }

    .more-fill-item {
        background-color: #fbfbfb;
        display: flex;
        justify-items: center;
        align-items: center;
        line-height: 25px;
        padding: 2px 20px;
        width: 80px;
    }

    .more-fill-item:hover {
        background-color: #d9d9d9;
    }

    @media (max-width: 780px) {
        .category {
            display: none;
        }
        .blog {
            width: 100%; /* 去掉30%后，70%变成100% */
            margin: 0;
        }
    }
</style>
